<template>
  <div class="">
    <!-- 搜索 -->
    <!--    <SearchBlock ref="searchBlockRef" @clickQuery="clickQuery"/>-->
    <div style="margin-bottom: 20px">

      <el-space wrap>
        <el-space>
          <div>站点</div>
          <el-select
              v-model="params.siteId"
              style="width: 200px"
          >
            <el-option
                v-for="item in sitesOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-space>

        <el-space>
          <div>店铺</div>
          <el-select
              v-model="params.storeId"
              style="width: 200px"
          >
            <el-option
                v-for="item in storeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-space>
        <el-space>
          <div>下单时间</div>
          <el-date-picker
              v-model="params.beginTime"
              placeholder=""
              type="date"
              value-format="YYYY-MM-DD"
          />
          <div>-</div>
          <el-date-picker
              v-model="params.endTime"
              placeholder=""
              type="date"
              value-format="YYYY-MM-DD"
          />
        </el-space>
        <el-button type="success" @click="clickQuery">查询</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </el-space>
    </div>
    <hz-table ref="tableRef" :columnSelection='false' :tableConfig="tableConfig" @pageChange="clickQuery">
      <template #action="{ column, record, text, index }">
        <!--        <el-button type="primary" size="small" link @click="clickEdit(record)">编辑</el-button>-->
      </template>
    </hz-table>

    <!-- 详情 -->
    <el-dialog v-model="downParams.show" title="导出订单数据">
      <div style="margin-top: 30px">
        <el-space >
          <div>下单时间</div>
          <el-date-picker
              v-model="downParams.beginTimeForDebug"
              placeholder=""
              type="date"
              value-format="YYYY-MM-DD"
          />
          <div>-</div>
          <el-date-picker
              v-model="downParams.endTimeForDebug"
              placeholder=""
              type="date"
              value-format="YYYY-MM-DD"
          />
        </el-space>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="downParams.show = false">取消</el-button>
          <el-button type="primary" @click="downExcel">
            导出Excel
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {ref, onMounted, reactive, computed, getCurrentInstance} from "vue";
import {useStore} from "vuex";
import {ElMessage} from "element-plus";
const {proxy} = getCurrentInstance();
const {moment} = proxy.$util
const store = useStore();
const searchBlockRef = ref(null);
const tableRef = ref(null);
const params = reactive({
  "siteId": "", // 站点ID
  "storeId": "",// 店铺ID
  "beginTime": "", // 开始时间
  "endTime": "",  // 结束时间
})

const tableConfig = reactive({
  columns: [
    {label: "菜品名", prop: "foodName", showTooltip: false},
     {label: "店铺", prop: "storeName"},
    {label: "站点名称", prop: "siteName"},
    {label: "份数", prop: "count"},
  ],
  dataSource: [],
  pageNo: 1,
  pageSize: 10,
  total: 0,
});
const dialog = reactive({
  show: false,
})
const formConfig = reactive({
  dataObj: {},
  type: 'add',
  dialog: dialog,
  okCallback: clickQuery,
})

const sitesOption = ref([])
const storeOption = ref([])


onMounted(() => {
  clickQuery();
})

// 点击查询
function clickQuery(data) {
  //  if (!data) {
  //   searchBlockRef.value.clickQuery();
  //   return;
  // }
  let {pageSize, pageNo, total} = tableConfig
  let param = {pageSize, pageNo, ...params};

  proxy.$http.post('/jx/jxOrderManage/queryFoodSummary', param).then(res => {
    if (res.code == 200) {
      tableConfig.dataSource = Array.isArray(res.result.orders) ? res.result.orders : [];
      tableConfig.total = res.result.totalCount
      // tableConfig.total = res.result.totalCount
    } else {
      // tableConfig.total = 0;
    }
  })
}

const downParams = reactive({
  beginTimeForDebug: '',
  endTimeForDebug: '',
  show: false,
})
const downExcel = () => {

  if(!downParams.beginTimeForDebug){
    ElMessage.error('请选择开始时间')
    return
  }
  if(!downParams.endTimeForDebug){
    ElMessage.error('请选择结束时间')
    return
  }
  const  res = `http://120.24.43.109:8080/jeecg-boot/jx/jxOrderManage/export?beginTime=${downParams.beginTimeForDebug}&endTime=${downParams.endTimeForDebug}`
  window.open(res)


}


function getSite() {
  const params = {keyword: '', regionId: '', pageNo: 1, pageSize: 1000}
  proxy.$http.get('/jx/jxSiteManage/querySitesByRegionOrKeyword', {params: params,}).then(res => {
    sitesOption.value.push(...res?.result.sites.map(item => {
      return {
        label: item.siteName,
        value: item.siteId
      }
    }))
  })
}

function getStore() {
  const params = {keyword: "", pageNo: 1, pageSize: 1000}
  proxy.$http.get('/jx/jxStoreManage/queryStoreByKeyword', {params}).then(res => {
    storeOption.value.push(...res?.result.stores.map(item => {
      return {
        label: item.storeName,
        value: item.id
      }
    }))
  })
}


//
const reset = () => {
  params.siteId = ''
  params.storeId = ''
  params.beginTime = ''
  params.endTime = ''
  params.keyword = ''
  params.orderType = 0
  clickQuery()
}
getSite()
getStore()
</script>
<style lang="scss" scoped></style>
